import { styleConfig } from '../stores/styleconfig'
import { getLightColor, getDarkColor } from '../utils/theme'

//设置主题颜色
export const setPrimaryColor = (color = '') => {
  const el = document.documentElement
  // 颜色加深,按钮点击时的样式颜色会变深一点
  document.documentElement.style.setProperty(
    '--el-color-primary-dark-2',
    `${getDarkColor(color || styleConfig().primary, 0.1)}`
  )
  // 设置主题颜色变量
  el.style.setProperty('--el-color-primary', color || styleConfig().primary)
  // 颜色变浅
  for (let i = 1; i <= 9; i++) {
    el.style.setProperty(
      `--el-color-primary-light-${i}`,
      `${getLightColor(color || styleConfig().primary, i / 10)}`
    )
  }
}

// 设置主背景颜色
export const setBgWhite = (color = '') => {
  const el = document.documentElement
  el.style.setProperty('--el-color-bg-white', color || styleConfig().bgWhite)
}

// 设置边框弯曲程度
export const setBorderRadius = (val: string = '') => {
  const el = document.documentElement
  el.style.setProperty('--el-border-radius', val || styleConfig().borderRadius)
}

// 设置黑色模式
export const setDark = (status = false, isBursh = '') => {
  const body = document.documentElement
  if (isBursh) {
    body.setAttribute('data-theme', status ? 'dark' : '')
  } else {
    body.setAttribute('data-theme', styleConfig().isDark ? 'dark' : '')
  }
}

// 页面加载时默认执行所有方法
const setStyle = () => {
  setPrimaryColor()
  setBgWhite()
  setBorderRadius()
  setDark()
}

export default setStyle
